import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import { routerRedux } from 'dva/router'
import { Page } from 'components'
import queryString from 'query-string'
import Filter from './components/Filter'
import List from './components/List'
import { ChartCard } from 'components/Charts'
import { Row, Col, Card, Tag, Button, Menu } from 'antd'
import Modal from './components/Modal'


const WxControl = ({ location, dispatch, loading, wxControl }) => {
  const { query, pathname } = location
  const { list, pagination, departments, modalVisible, selectedRowKeys } = wxControl
  const handleRefresh = (newQuery) => {
    dispatch(routerRedux.push({
      pathname,
      search: queryString.stringify({
        ...query,
        ...newQuery
      })
    }))
  }

  const filterProps = {
    selectedRowKeys,
    filter: {
      ...query
    },
    onFilterChange(value) {
      handleRefresh({
        ...value,
        current: 1
      })
    },
    handleOnChange(value) {
      dispatch({
        type: 'wxControl/updateDimension',
        payload: {
          dimension: value
        }
      })
    },
    showModal() {
      dispatch({
        type: "wxControl/updateState",
        payload: {
          modalVisible: true
        }
      })
    }
  }

  const listProps = {
    rowKey: 'id',
    dataSource: list,
    loading: loading.effects['wxControl/query'],
    pagination,
    location,
    onChange(page) {
      handleRefresh({
        current: page.current,
        size: page.pageSize
      })
    },
    rowSelection: {
      selectedRowKeys,
      onChange: (keys, row) => {
        dispatch({
          type: 'wxControl/updateState',
          payload: {
            selectedRowKeys: keys
          },
        })
      }
    },
  }

  const modalProps = {
    modalVisible,
    onOk() {
      dispatch({
        type: "wxControl/updateState",
        payload: {
          modalVisible: false
        }
      })
    },
    onCancel() {
      dispatch({
        type: "wxControl/updateState",
        payload: {
          modalVisible: false
        }
      })
    }
  }

  const handleMenuItemClick = (id) => {
    dispatch({
      type: "wxControl/query",
      payload: {
        belongDeptId: id
      }
    })
  }

  return (
    <div>
      <Row gutter={24}>
        <Col md={6}>
          <Card title="部门列表" style={{ height: 800 }} bordered={false}>
            <Menu>
              {departments.map(item => (<Menu.Item onClick={() => handleMenuItemClick(item.id)} key={item.id} >{item.name}</Menu.Item>))}
            </Menu>
          </Card>
        </Col>
        <Col md={18}>
          <ChartCard style={{ marginBottom: 12 }}>
            <Filter {...filterProps} />
          </ChartCard>
          <Page inner>
            <List {...listProps} />
          </Page>
        </Col>
      </Row>
      <Modal {...modalProps} />
    </div>
  )
}

WxControl.propTypes = {
  wxControl: PropTypes.object,
  location: PropTypes.object,
  loading: PropTypes.object
}
export default connect(({ wxControl, loading }) => ({ wxControl, loading }))(WxControl)
